<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#" target="_blank" title="标签" class="link" aaa="你好" data-age="18" data-sex="男" data-name="俊俊"></a>

    <hr>
    元素的默认属性:href target enter-class=""
    自定义属性:aaa
    <hr>
    注意:属性可以包括 元素属性和元素的css属性
    元素属性:写在标签里面的,包含默认的属性和自定义的属性
    <hr>
    <ul>
        <li>11111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
    <script>
        // getAttribute() 获取特定的元素节点的属性的值,包含自定义属性和默认属性

        // setAttribute() 设置特定的元素节点的属性的值.,包含自定义属性和默认属性

        // removeAttribute() 删除特定的元素节点的属性的值.,包含自定义属性和默认属性

        // var link=document.querySelector('a');
        // console.log(link.getAttribute('title'));
        // console.log(link.getAttribute('aaa'));

        // link.setAttribute('bbb','我不好')

        // link.removeAttribute('href')
    </script>

    ### H5 自定义属性

    - `data-` 表示该属性是一个自定义属性
    - `data-` 以后的内容才叫做 属性名
    - 等于号 后面的内容才叫做 属性值
    - 每一个元素身上天生自带一个属性, 叫做 `dataset`, 是一个 类似对象 的数据结构
    - 内部记录的是该元素身上所有 `data-` 开头的 自定义属性
    - 对于该元素 H5 自定义属性的操作, 就是对这个数据结构的操作(对象操作语法)
    <script>
        // var link=document.querySelector('a');
        // // console.log(link.dataset);
        // console.log(link.dataset.name);
        // link.dataset.hhhh="俊俊爱喝水";
        // console.log(link.getAttribute('data-age'));
    </script>

    <!-- 获取方式  -->
    <script>
        var link=document.querySelector('a');
        console.log(link.title);
        console.log(link["title"]);
        console.log(link.aaa);//undefined
        console.log(link["aaa"]);//undefined
        // 注意:点和中括号不能获取到写死在标签里面的自定义属性,可以获取系统提供的属性
        link.hehe="1111"
        console.log(link.hehe);
    </script>
</body>
</html>